<template>
  <div class="mvContainer" ref="mvContainer">
    <div class="mvPlayPage">
      <!-- 视频区 -->
      <div class="playoutbox" :class="isblack ? 'active' : ''">
        <div class="playContainer" :class="isblack ? 'active' : ''">
          <div class="playbox">
            <!-- <video
              class="mvVideo"
              autoplay
              controls
              tabindex="-1"
              role="application"
              preload="auto"
              :src="playMv.url"
            ></video> -->
            <videoPlayer
              v-if="videoOptions.sources[0].src"
              :options="videoOptions"
              :mvId="Number(mvId)"
              @play="onPlay"
              @pause="onPause"
              @seeking="onSeeking"
            />
            <!-- 点击事件 -->
            <div @click="isblack = !isblack" class="lightTap">
              <i
                class="iconfont"
                :class="isblack ? 'icon-night' : 'icon-day'"
              ></i>
            </div>
          </div>
          <div class="mvdesc">
            <div class="content">
              <div class="left">
                <p class="mvname">
                  {{ mvDetail.name }}
                </p>
                <p class="mvAuthod" @click="toArtist(mvDetail.artistId)">
                  {{ artist }}
                </p>
              </div>
              <div class="right">
                <span class="playNum"
                >播放量：<span class="num">{{
                    mvDetail.playCount
                  }}</span></span
                >
                <span class="playdate"
                >发布时间：<span class="date">{{
                    mvDetail.publishTime
                  }}</span></span
                >
              </div>
            </div>
            <div class="desc" v-if="!mvDetail.desc">暂无简介</div>
            <div class="desc" v-else>{{ mvDetail.desc }}</div>
          </div>

          <!-- <button @click="userLoginfn">登入</button>
          <button @click="userLoginOut">登出</button> -->
        </div>
      </div>
      <!-- 内容区 -->
      <div class="mvContent">
        <!-- 左侧评论区 -->
        <div class="commentCotainer">
          <Comment
            :id="mvId"
            :type="'1'"
            :limit="mvCommentParams.limit"
            :commentList="commentList"
            @getComment="getMvComment"
            @handleCurrentChange="handleCurrentChange"
          />
        </div>
        <!-- 右侧相似区 -->
        <div class="likeMv">
          <p class="title">相似MV</p>
          <div class="likeMvList">
            <MvShow
              v-for="simimv in simimvList"
              :key="simimv.id"
              :mvItem="simimv"
              @toArtist="toArtist(simimv.artistId)"
              @toPlay="toPlay"
            />
          </div>
        </div>
      </div>
    </div>
<!--    <div class="pagebottom">-->
<!--      <div class="bottomContent">mvContent</div>-->
<!--    </div>-->
    <!-- <Login :isshowlogin="isshowlogin" @changeIslogin="changeIslogin" /> -->
  </div>
</template>

<script>
  import MvShow from "../../../components/MvShow";
  import Comment from "../../../components/Comment";
  // import Login from "../../../components/Login";
  import videoPlayer from "../../../components/video";
  import { mapGetters, mapActions, mapMutations } from "vuex";

  import {
    reqGetMvPlayUrl,
    reqGetMvDetail,
    reqGetMvComment,
    reqGetSimiMv,
    // reqCommitComment,
    // reqCommentPoint,
  } from "../../../api/mv";

  export default {
    name: "MvPlay",
    data() {
      return {
        // isshowlogin: false,
        isblack: false, // 视频关灯开关
        playMv: {}, // 播放的mv
        mvDetail: {}, // mv的详情
        simimvList: [], // 相似mv
        mvId: null, // 播放mv的id
        commentList: {}, // 评论
        // 请求评论的参数
        mvCommentParams: {
          limit: 20,
          offset: 0,
          before: 0,
          timestamp: 0,
        },
        // mv相关配置
        videoOptions: {
          sources: [
            {
              type: "",
              src: "", // url地址
            },
          ],
          qualityList: [],
          quality: {},
        },
        currentTime: 0, // 当前视频播放的时长
      };
    },
    mounted() {
      const { id } = this.$route.query;
      this.mvId = id;
      if (this.videoRecord) {
        const mv = this.videoRecord.find((item) => item.mvId === Number(id));
        if (mv) {
          this.currentTime = mv[id];
        }
      }
      this.getPlayUrl(id);
      this.getMvDetail(id);
      this.getMvComment(id);
      this.getSimimv(id);
    },
    computed: {
      ...mapGetters(["videoRecord"]),
      artist() {
        if (!this.mvDetail.artists) {
          return "";
        }
        const arr = this.mvDetail.artists.map((item) => {
          return item.name;
        });
        return arr.join("/");
      },
      userCommentlength() {
        if (!this.userComment.trim()) {
          return 0;
        }
        return this.userComment.trim().length;
      },
    },
    methods: {
      ...mapMutations(["CHANGERECORD"]),
      ...mapActions(["loginOut"]),
      onPlay(play) {
        play.currentTime(this.currentTime);
      },
      onSeeking(play) {
        this.currentTime = play.currentTime();
      },
      onPause(play) {
        this.currentTime = play.currentTime();
        play.pause();
      },
      // 改变登入弹窗
      // changeIslogin(flag) {
      //   this.isshowlogin = flag;
      // },
      // 弹出登入弹窗
      // userLoginfn() {
      //   this.isshowlogin = true;
      // },
      // 登出
      // userLoginOut() {
      //   this.loginOut().then(() => {
      //     this.$message({
      //       message: "登录成功",
      //       type: "success",
      //     });
      //   });
      // },
      // 获取视频播放
      getPlayUrl(id) {
        reqGetMvPlayUrl(id).then((res) => {
          this.$set(this.videoOptions.sources, 0, {
            type: "video/mp4",
            src: res.data.url,
          });
          // this.videoOptions.sources.type = "video/mp4";
          // this.videoOptions.sources.src = res.data.url;
          // this.playMv = res.data;
        });
      },
      // 获取mv详情
      getMvDetail(id) {
        reqGetMvDetail(id).then((res) => {
          this.mvDetail = res.data;
        });
      },
      // 获取mv评论数据
      getMvComment(id) {
        const { limit, offset, before, timestamp } = this.mvCommentParams;
        reqGetMvComment({ id, limit, offset, before, timestamp }).then((res) => {
          this.commentList = res;
        });
      },
      // 分页器改变当前页
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
        if (currentPage > 1) {
          this.mvCommentParams.offset =
            (currentPage - 1) * this.mvCommentParams.limit;
        } else {
          this.mvCommentParams.offset = 0;
        }
        this.getMvComment(this.id);
      },
      // 获取相似mv
      getSimimv(id) {
        reqGetSimiMv(id).then((res) => {
          let similist = res.mvs;
          if (similist.length > 5) {
            similist = similist.slice(0, 6);
          }
          this.simimvList = similist;
        });
      },
      // 刷新
      toPlay(id) {
        let query = this.$router.history.current.query;
        let path = this.$router.history.current.path;
        //对象的拷贝
        let newQuery = JSON.parse(JSON.stringify(query));
        newQuery.id = id;
        this.$router.push({ path, query: newQuery });
        this.$router.go(0);
      },
      // 去作者去
      toArtist(id) {
        this.$router.push({
          path: "/singer",
          query: {
            id,
          },
        });
      },
    },
    beforeDestroy() {
      this.CHANGERECORD({ id: Number(this.mvId), currentTime: this.currentTime });
    },
    components: {
      MvShow,
      Comment,
      // Login,
      videoPlayer,
    },
  };
</script>

<style lang="less" scoped>
  // 样式初始化
  // body::-webkit-scrollbar {
  //   display: none;
  // }

  li {
    list-style: none;
  }
  .mvContainer {
    margin-top: 102px;
    width: 100%;
  }
  .playoutbox {
    width: 100%;
    // height: 770px;
    background-color: white;
    &.active {
      background-color: #1f1f1f;
    }
  }
  .mvPlayPage {
    width: 100%;
    // height: 100vh - 82px;
    margin: 0 auto;
    min-width: 1200px;
    // overflow: scroll;
  }

  p {
    margin: 0;
    padding: 0;
  }
  // 视频区开始
  .playContainer {
    width: 1200px;
    margin: auto;
    padding-top: 40px;
    padding-bottom: 20px;
    &.active {
      background-color: #1f1f1f;
      .lightTap {
        background-color: #333333;
        i {
          color: #fff;
        }
      }
      .mvdesc {
        .mvname {
          color: #fff;
        }
        .mvAuthod {
          color: #666;
        }
      }
    }
  }
  .playbox {
    width: 100%;
    height: 675px;
    position: relative;
    background-color: #000000;
    .mvVideo {
      outline: none;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .lightTap {
      width: 50px;
      height: 50px;
      position: absolute;
      border-radius: 10px 0 0 10px;
      top: 50%;
      right: 0;
      margin-top: -25px;
      background-color: white;
      text-align: center;
      opacity: 0;
      &:hover {
        opacity: 1;
      }
      i {
        font-size: 30px;
        color: #60606d;
        line-height: 50px;
      }
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    .left {
      display: flex;
      align-items: center;
      width: 70%;
      .mvname {
        max-width: 70%;
        font-size: 24px;
        line-height: 24px;
        color: #333333;
        padding-right: 20px;
        // overflow: hidden;
        // display: -webkit-box;
        // // 设置几行溢出隐藏
        // -webkit-line-clamp: 2;
        // // 告知文本排列方向
        // -webkit-box-orient: vertical;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .mvAuthod {
        max-width: 30%;
        height: 24px;
        line-height: 24px;
        color: #666666;
        font-size: 14px;
        cursor: pointer;
        overflow: hidden;
        display: -webkit-box;
        // 设置几行溢出隐藏
        -webkit-line-clamp: 2;
        // 告知文本排列方向
        -webkit-box-orient: vertical;
      }
    }
    .right {
      .playNum {
        font-size: 14px;
        color: #999999;
        padding-left: 20px;
      }
      .playdate {
        font-size: 14px;
        color: #999999;
        padding-left: 20px;
      }
    }
  }
  .desc {
    font-size: 14px;
    color: #999999;
  }
  // 视频区结束
  // 内容区
  .mvContent {
    width: 1200px;
    margin: auto;
    display: flex;
    .commentCotainer {
      flex-grow: 1;
      padding-bottom: 100px;
      padding-top: 30px;
    }
    .likeMv {
      flex-shrink: 0;
      width: 300px;
      padding-top: 40px;
      padding-left: 20px;
    }
  }
  // 提交评论区开始

  // 相似mv开始
  .likeMv {
    .title {
      font-size: 16px;
      line-height: 24px;
      &::before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 18px;
        border-radius: 2px;
        background-color: #ff641e;
        vertical-align: top;
      }
    }
  }
  .likeMvList {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .mvItem {
    box-sizing: border-box;
    width: 280px;
    margin-top: 20px;
    .mvImagbox {
      width: 100%;
      height: 126px;
      overflow: hidden;
      border-radius: 3px;
      cursor: pointer;
      position: relative;
      i {
        color: white;
        font-size: 60px;
        position: absolute;
        top: 50%;
        bottom: 0;
        right: 0;
        left: 0;
        margin-top: -30px;
        text-align: center;
        transform: scale(0.5);
        opacity: 0;
        transition: all 0.4s linear;
        // display: none;
        z-index: 2;
      }
      .mvImag {
        width: 100%;
        height: 100%;
        transform: scale(1);
        transition: all 0.4s linear;
      }
      &:hover {
        i {
          // display: block;\
          opacity: 1;
          transform: scale(1);
        }
        .mvImag {
          transform: scale(1.1);
        }
      }
    }
    .mvtitle {
      cursor: pointer;
      margin-top: 15px;
      font-size: 14px;
      color: #333333;
      overflow: hidden;
      display: -webkit-box;
      /* 设置几行溢出隐藏 */
      -webkit-line-clamp: 2;
      /* 告知文本排列方向 */
      -webkit-box-orient: vertical;
    }
    .mvauthod {
      line-height: 24px;
      font-size: 14px;
      color: #999999;
      cursor: pointer;
    }
    .mvpalynum {
      line-height: 24px;
      font-size: 14px;
      color: #999999;
      margin-bottom: 15px;
      i {
        display: inline-block;
        vertical-align: top;
        line-height: 24px;
        font-size: 24px;
      }
    }
  }
  // 相似mv结束
  // 页面底部
  .pagebottom {
    width: 100%;
    background-color: #06060b;
    .bottomContent {
      width: 1200px;
      min-width: 1200px;
      margin: auto;
      line-height: 40px;
      color: #60606d;
    }
  }
</style>
